<template>
	<div class="app-container foSi14">
		<div class="borRad20 coFFF hei34 dis disAl cuPo poAbs fanhui bac6b7" @click.stop="back()">返回</div>
		<div style="height: 30px;"></div>
		<div class="mar" style="width: 840px;">
			<div class="foSi30 fow800 mar-bott10 textCen">{{sojson.templateName}}</div>
			<div class="wid100 hei44 dis item-l item-bor1">
				<div class="item-bor item-w item-p dis disAl disJuB">
					<div>发起方</div>
					<div>{{sojson.recipients[0].isPromoter?sojson.recipients[0].roleName:sojson.recipients[1].roleName}}</div>
				</div>
			</div>
			<div v-if="sojson.recipients.length > 1" class="wid100 hei44 dis item-l item-bor1">
				<div class="item-bor item-w item-p dis disAl disJuB">
					<div>签署方</div>
					<div>{{replenish.approveName?replenish.approveName:'未补充签署方信息'}}</div>
				</div>
				<div class="cuPo dis disAl mar-left20" style="color: #6b7cdd;"
					@click.stop="recipientsVisible = true">点击补充签署方信息</div>
			</div>
			<div v-if="sojson.components.length > 0" class="wid100 dis disAl flwa mar-top20">
				<div v-for="(item,index) in sojson.components" :key="index" class="item-bor1 item-l" 
					:class="item.componentType === 'FILL_IMAGE' || item.componentType === 'MULTI_LINE_TEXT'?
					'wid100 item-p1 ':'item-w item-p hei44 dis disAl disJuB item-bor'">
					<div style="min-width: 100px;">{{item.componentName}}</div>
					<formInput :type="item.componentType" :value="item.componentValue" :title="item.componentName"
						:index="index" @indexInput='indexInput' component="components"></formInput>
				</div>
			</div>
			<div v-if="sojson.signComponents.length > 0" class="wid100 dis disAl flwa mar-top20">
				<div v-for="(item,index) in sojson.signComponents" :key="index" class="item-bor1 wid100 item-l dis"
					v-if="item.componentType != 'SIGN_SEAL' && item.componentType != 'SIGN_SIGNATURE' && 
					item.componentType != 'SIGN_PAGING_SEAL' && item.componentType != 'ATTACHMENT' " >
					<div :class="item.componentType === 'FILL_IMAGE' || item.componentType === 'MULTI_LINE_TEXT'?
						'wid100 item-p1':'item-w item-p hei44 dis disAl disJuB item-bor'">
						<div style="min-width: 100px;">{{item.componentName}}</div>
						<formInput :type="item.componentType" :value="item.componentValue" :title="item.componentName"
							:index="index" @indexInput='indexInput' component="signComponents"></formInput>
					</div>
				</div>
			</div>
		</div>
		<div class="dis disAl disJuC " style="padding: 30px 0;">
			<div class="dis disAl hei34 borRad20 coFFF cuPo bac6b7" @click.stop="tijiao()" style="padding: 0 24px;">提交</div>
		</div>
		<div v-if="recipientsVisible" class="zhezhao wh100"></div>
		<div v-if="recipientsVisible" class="zhezhaoN dis disAl disJuC wh100">
			<div class="poRel borRad10 bacFFF zhezhaoWH" style="width: 840px;">
				<div class="wid90 mar">
					<div class="wid100 dis disAl disJuB" style="padding: 30px 0 10px;border-bottom: 1px solid #d9d9d9;">
						<div class="dis disAl">
							<div class="foSi20 fowe600 mar-right10">补充签署方</div>
						</div>
						<svg-icon icon-class="guanbi" class="mar0 cuPo" @click.stop="recipientsVisible = false"
							style="color: #ACACAC;width: 24px;height: 24px;" />
					</div>
					<div class="wid100 item-l hei44 dis item-bor mar-top10">
						<div class="item-w item-bor item-p dis disAl disJuB">
							<div>姓名</div>
							<div class="poRel">
								<el-input v-model="replenish.approveName" style="width: 200px;" size="small"
									placeholder="姓名/手机号/卡号" @input="nameInput" />
								<div v-if="nameVisible" class="poAbs nameSuo" style="right: 0;">
									<div v-for="(item,index) in nameList" :key="index" class="suosouText foSi14"
										@click.stop="nameClick(index)">
										{{ item.title }})
									</div>
								</div>
							</div>
						</div>
						<div class="item-w item-p dis disAl disJuB">
							<div>姓名</div>
							<el-input v-model="replenish.phoneNumber" style="width: 200px;" size="small"
								placeholder="手机号"/>
						</div>
					</div>
					<div class="wid100 item-l hei44 dis item-bor mar-top10">
						<div class="item-w item-bor item-p dis disAl disJuB">
							<div>证件号</div>
							<el-input v-model="replenish.idCardNumber" style="width: 200px;" size="small"
								placeholder="证件号"/>
						</div>
						<div class="item-w item-p dis disAl disJuB">
							<div>证件类型</div>
							<div>{{xuanze[replenish.idCardType]}}</div>
						</div>
					</div>
					<div class="wid100 dis disAl disJuC foSi14 coFFF" style="padding: 20px 0 40px">
						<div class="mar-right20 que cuPo" style="background: #6b7cdd;" @click.stop="nameBao">保存</div>
						<div class="que cuPo" style="background: #616b74;" @click.stop="recipientsVisible = false">取消</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import {
		getTemplateCreate,
		getAuthenFind
	} from '@/api/contract'
	import formInput from './formInput.vue'
	import {
		getSearchCardUser
	} from '@/api/components'
	export default {
		name: 'contractinitiate',
		components: {
			formInput
		},
		data() {
			return {
				sojson: null,
				xuanze: ['居民身份证','港澳台居民居住证','港澳居民来往内地通行证'],
				replenish:{
					idCardType: 0,
					approveName: '',
					idCardNumber: '',
					phoneNumber: '',
					approverType: 'INDIVIDUAL',
					orgName: '',
					isPromoter: 1
				},
				recipientsVisible: false,
				nameList: [],
				namePicture: null,
				nameVisible: false,
				authenFind: null
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var contract_detail = localStorage.getItem('contract_detail')
			this.sojson = JSON.parse(contract_detail)
			var xuanList = [{
				name: '发起合同',
				url: '/contract/contractInitiateTwo',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getAuthenFind()
		},
		methods: {
			getAuthenFind() {
				getAuthenFind().then(response => {
					const {
						data
					} = response
					this.authenFind = data.data
				}).catch(error => {
					console.log(error)
				})
			},
			back() {
				this.$router.go(-1)
			},
			nameBao(){
				if(this.namePicture){
					this.recipientsVisible = false
				}else{
					return this.$message.error('请选择会员');
				}
			},
			nameClick(index) {
				this.namePicture = this.nameList[index]
				this.replenish.approveName = this.nameList[index].nickname
				this.replenish.phoneNumber = this.nameList[index].tel
				this.nameVisible = false
			},
			nameInput(e) {
				var date = {
					'keyword': e
				}
				getSearchCardUser(date).then(response => {
					const {
						data
					} = response
					console.log(data)
					this.nameList = data
					this.nameVisible = true
				}).catch(error => {
					console.log(error)
				})
			},
			indexInput(value, index, component) {
				console.log(value)
				console.log(index)
				if (component == 'components') {
					console.log(this.sojson.components[index])
					this.sojson.components[index].componentValue = value
				} else {
					console.log(this.sojson.signComponents[index])
					this.sojson.signComponents[index].componentValue = value
				}
			},
			tijiao() {
				if(!this.namePicture){
					return this.$message.error('请选择会员');
				}
				var components = []
				for (var i = 0; i < this.sojson.components.length; i++) {
					if (this.sojson.components[i].componentRequired) {
						if (!this.sojson.components[i].componentValue) {
							return this.$message.error(this.sojson.components[i].componentName + '不能为空');
						}
					}
					components.push({
						componentId: this.sojson.components[i].componentId,
						componentValue: this.sojson.components[i].componentValue
					})
				}
				for (var i = 0; i < this.sojson.signComponents.length; i++) {
					if (this.sojson.signComponents[i].componentType != 'SIGN_SEAL' &&
						this.sojson.signComponents[i].componentType != 'SIGN_SIGNATURE' &&
						this.sojson.signComponents[i].componentType != 'SIGN_PAGING_SEAL' &&
						this.sojson.signComponents[i].componentType != 'ATTACHMENT') {
						if (this.sojson.signComponents[i].componentRequired) {
							if (!this.sojson.signComponents[i].componentValue) {
								return this.$message.error(this.sojson.signComponents[i].componentName + '不能为空');
							}
						}
						components.push({
							componentId: this.sojson.signComponents[i].componentId,
							componentValue: this.sojson.signComponents[i].componentValue
						})
					}
				}
				let that = this
				var replenish = []
				for (var i = 0; i < that.sojson.recipients.length; i++) {
					if (!that.sojson.recipients[i].isPromoter) {
						replenish.push({
							isPromoter: 1,
							recipientId: that.sojson.recipients[i].recipientId,
							recipientType: that.sojson.recipients[i].recipientType,
							roleName: that.sojson.recipients[i].roleName,
							routingOrder: that.sojson.recipients[i].routingOrder,
							signType: that.sojson.recipients[i].signType,
							approveName: that.replenish.approveName,
							idCardType: 'ID_CARD',
							idCardNumber: that.replenish.idCardNumber,
							phoneNumber: that.replenish.phoneNumber,
							approverType: 'PERSON'
						})
					} else {
						replenish.push({
							isPromoter: 0,
							recipientId: that.sojson.recipients[i].recipientId,
							recipientType: that.sojson.recipients[i].recipientType,
							roleName: that.sojson.recipients[i].roleName,
							routingOrder: that.sojson.recipients[i].routingOrder,
							signType: that.sojson.recipients[i].signType,
							approveName: that.authenFind.legal_person,
							phoneNumber: that.authenFind.mobile,
							organizationName: that.authenFind.enterprise_name,
							approverType:'ORGANIZATION'
						})
					}
				}
				console.log(replenish)
				var papme = {
					templateId: that.sojson.templateId,
					flowName: that.sojson.templateName,
					deadline: that.sojson.templateVersion,
					flowDescription: that.sojson.description,
					components: JSON.stringify(components),
					flowApproverInfo: JSON.stringify(replenish),
					member_id: that.namePicture.id,
					member_name: that.replenish.approveName,
					member_mobile: that.replenish.phoneNumber,
					autoCancel: false
				}
				getTemplateCreate(papme).then(response => {
					const {
						data
					} = response
					console.log(data)
					this.back()
				}).catch(error => {
					console.log(error)
				})
			},
		}
	}
</script>

<style scoped>
	.app-container {
		padding: 20px;
	}
	.fanhui {
		background: #6b7cdd;
		padding: 0 24px;
		right: 63px;
		top: 10px;
		z-index: 10;
	}
	.nameSuo {
		min-width: 138px;
		z-index: 15;
		background: #fff;
		border: 1px solid #d9d9d9;
		top: 35px;
	}
	
	.suosouText {
		height: 32px;
		line-height: 32px;
		padding: 0 10px;
		border-bottom: 1px solid #d9d9d9;
		cursor: pointer;
		white-space: nowrap;
	}
</style>